import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const BarChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'BarChart',
  title: '柱状图',
  category: '图表组件',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'BarChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
  ],
  configure: {
    props: [
      // 基础配置
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础配置',
        },
        items: [
          {
            name: 'title',
            title: {
              label: '图表标题',
              tip: '图表的标题文字'
            },
            setter: 'StringSetter',
          },
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '图表宽度，可以是数字(px)或百分比'
            },
            setter: 'StringSetter',
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '图表高度，单位px'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'theme',
            title: {
              label: '主题',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
          }
        ]
      },
      // 数据配置
      {
        name: 'data',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据配置',
        },
        items: [
          {
            name: 'xAxisData',
            title: {
              label: 'X轴数据',
              tip: 'X轴标签数据，数组格式'
            },
            setter: 'JsonSetter',
          },
          {
            name: 'series',
            title: {
              label: '系列数据',
              tip: '图表系列数据配置'
            },
            setter: 'JsonSetter',
          }
        ]
      },
      // 显示配置
      {
        name: 'display',
        type: 'group',
        display: 'accordion',
        title: {
          label: '显示配置',
        },
        items: [
          {
            name: 'showLegend',
            title: {
              label: '显示图例',
              tip: '是否显示图例'
            },
            setter: 'BoolSetter',
          },
          {
            name: 'showGrid',
            title: {
              label: '显示网格',
              tip: '是否显示网格线（注：Y轴虚线已禁用）'
            },
            setter: 'BoolSetter',
          },
          {
            name: 'showLabel',
            title: {
              label: '显示标签',
              tip: '是否显示数值标签'
            },
            setter: 'BoolSetter',
          }
        ]
      },
      // 柱状图配置
      {
        name: 'bar',
        type: 'group',
        display: 'accordion',
        title: {
          label: '柱状图配置',
        },
        items: [
          {
            name: 'barWidth',
            title: {
              label: '柱子宽度',
              tip: '柱子的宽度'
            },
            setter: 'NumberSetter',
          },
          {
            name: 'barGap',
            title: {
              label: '柱子间距',
              tip: '不同系列柱子之间的间距'
            },
            setter: 'StringSetter',
          },
          {
            name: 'yAxisMax',
            title: {
              label: 'Y轴最大值',
              tip: 'Y轴的最大值'
            },
            setter: 'NumberSetter',
          }
        ]
      },
      // 高级配置
      {
        name: 'advanced',
        type: 'group',
        display: 'accordion',
        title: {
          label: '高级配置',
        },
        items: [
          {
            name: 'customOption',
            title: {
              label: '自定义配置',
              tip: 'ECharts的自定义配置项'
            },
            setter: 'JsonSetter',
          }
        ]
      },
      // 样式属性
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式属性',
        },
        items: [
          {
            name: 'style',
            title: {
              label: '自定义样式',
            },
            setter: 'StyleSetter',
          },
          {
            name: 'className',
            title: {
              label: '自定义类名',
            },
            setter: 'StringSetter',
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    },
    component: {}
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '24小时人流统计',
    screenshot: '',
    schema: {
      componentName: 'BarChart',
      props: {
        title: '（人）',
        width: 500,
        height: 224,
        theme: 'dark',
        showLegend: true,
        showGrid: true,
        barWidth: 4,
        yAxisMax: 20000,
        xAxisData: [
          '0-1点', '1-2点', '2-3点', '3-4点', '4-5点', '5-6点', 
          '6-7点', '7-8点', '8-9点', '9-10点', '10-11点', '11-12点',
          '12-13点', '13-14点', '14-15点', '15-16点', '16-17点', '17-18点',
          '18-19点', '19-20点', '20-21点', '21-22点', '22-23点', '23-24点'
        ],
        series: [
          {
            name: '进站人次',
            color: '#00D4FF',
            data: [
              { name: '0-1点', value: 800 }, { name: '1-2点', value: 500 }, { name: '2-3点', value: 400 },
              { name: '3-4点', value: 300 }, { name: '4-5点', value: 500 }, { name: '5-6点', value: 1200 },
              { name: '6-7点', value: 2800 }, { name: '7-8点', value: 7200 }, { name: '8-9点', value: 11500 },
              { name: '9-10点', value: 14200 }, { name: '10-11点', value: 15800 }, { name: '11-12点', value: 17200 },
              { name: '12-13点', value: 18500 }, { name: '13-14点', value: 17600 }, { name: '14-15点', value: 16200 },
              { name: '15-16点', value: 15500 }, { name: '16-17点', value: 16800 }, { name: '17-18点', value: 18200 },
              { name: '18-19点', value: 17500 }, { name: '19-20点', value: 15200 }, { name: '20-21点', value: 12800 },
              { name: '21-22点', value: 10500 }, { name: '22-23点', value: 7800 }, { name: '23-24点', value: 3800 }
            ]
          },
          {
            name: '出站人次',
            color: '#1AD7FF',
            data: [
              { name: '0-1点', value: 400 }, { name: '1-2点', value: 300 }, { name: '2-3点', value: 200 },
              { name: '3-4点', value: 200 }, { name: '4-5点', value: 200 }, { name: '5-6点', value: 300 },
              { name: '6-7点', value: 400 }, { name: '7-8点', value: 1300 }, { name: '8-9点', value: 1300 },
              { name: '9-10点', value: 1400 }, { name: '10-11点', value: 1400 }, { name: '11-12点', value: 1300 },
              { name: '12-13点', value: 1300 }, { name: '13-14点', value: 1300 }, { name: '14-15点', value: 1400 },
              { name: '15-16点', value: 1300 }, { name: '16-17点', value: 1400 }, { name: '17-18点', value: 1300 },
              { name: '18-19点', value: 1300 }, { name: '19-20点', value: 1300 }, { name: '20-21点', value: 1400 },
              { name: '21-22点', value: 1300 }, { name: '22-23点', value: 1100 }, { name: '23-24点', value: 700 }
            ]
          }
        ]
      }
    }
  },
  {
    title: '单系列柱状图',
    screenshot: '',
    schema: {
      componentName: 'BarChart',
      props: {
        title: '销售统计',
        height: 300,
        theme: 'dark',
        showLegend: false,
        showGrid: true,
        barWidth: 20,
        xAxisData: ['一月', '二月', '三月', '四月', '五月', '六月'],
        series: [
          {
            name: '销售额',
            color: '#00D4FF',
            data: [
              { name: '一月', value: 8000 },
              { name: '二月', value: 9000 },
              { name: '三月', value: 7500 },
              { name: '四月', value: 9200 },
              { name: '五月', value: 8800 },
              { name: '六月', value: 9600 }
            ]
          }
        ]
      }
    }
  },
  {
    title: '浅色主题柱状图',
    screenshot: '',
    schema: {
      componentName: 'BarChart',
      props: {
        title: '用户活跃度',
        height: 350,
        theme: 'light',
        showLegend: true,
        showGrid: true,
        showLabel: true,
        barWidth: 15,
        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        series: [
          {
            name: '活跃用户',
            color: '#1890FF',
            data: [
              { name: '周一', value: 1200 },
              { name: '周二', value: 1400 },
              { name: '周三', value: 1100 },
              { name: '周四', value: 1600 },
              { name: '周五', value: 1800 },
              { name: '周六', value: 1300 },
              { name: '周日', value: 1500 }
            ]
          }
        ]
      }
    }
  }
];

export default {
  ...BarChartMeta,
  snippets,
}; 